<template>
  <div class="history_list">
    <div class="conditions_title">查询条件</div>
    <div class="conditions">
      <div class="s_date">
        <span>日期</span>
        <el-date-picker v-model="value1" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="e_date">
        <el-checkbox v-model="checked1"></el-checkbox>
        <span>至</span>
        <el-date-picker v-model="value2" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="category">
        <span>类别</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="button">
        <el-button>查询</el-button>
        <el-button>删除</el-button>
        <el-button>文档查看</el-button>
      </div>
    </div>
    <div class="tab">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="number" label="应急编号" width="130">
        </el-table-column>
        <el-table-column prop="time" label="应急时间" width="130">
        </el-table-column>
        <el-table-column prop="name" label="应急名称">
        </el-table-column>
        <el-table-column prop="names" label="应急名称">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: '',
      value2: '',
      checked1: false,
      options: [{
        value: '选项1',
        label: '全部'
      }],
      value: '选项1',
      tableData: [{
        number: '',
        time: '',
        name: '',
        names: ''
      }]
    }
  }
}
</script>
<style scoped lang="less">
.history_list{
  width: 100%;
  height: 100%;
  font-size: 12px;
  padding-right: 10px;
  box-sizing: border-box;
}
.history_list .conditions{
  width: 100%;
  border: 1px solid;
  padding: 20px 30px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  .s_date,.e_date,.category{
    width: 260px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .button{
    width: 260px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    .el-button{
      padding: 12px 40px;
      margin-bottom: 10px;
    }
  }
}

.history_list .tab{
  width: 100%;
  height: 300px;
  border: 1px solid;
  margin-top: 10px;
}
</style>
